<template>
	<view class="wraper">
		<titlebar :back="true" :text="title" img="" 
			backgroundColor="#00000000">

		</titlebar>
		<view class="tabs" :style="'padding-top:'+navigationBarHeight">
			<u-tabs   :activeStyle="{color: '#3d3a3a',fontWeight: '700'}" :inactiveStyle="{
			    color: '#ADB0AE',fontWeight: '400'}" :scrollable="false" :list="tabsList" @click="selectSort"></u-tabs>
		</view>
		
		<view class="custom_card">
			<image class="custom_card_bg" src="@appstatic/car/custom_card_bg.png" mode="">
			</image>
			<view class="custom_card_wraper">
				<view class="item">
					<text class="name">总里程 km</text>
					<text class="value">{{persionInfo.totalMile}}</text>
				</view>
				<view class="item">
					<text class="name">本月里程 km</text>
					<text class="value">{{persionInfo.currentMonthMile}}</text>
				</view>
				<view class="item">
					<text class="name">今日里程 km</text>
					<text class="value">{{persionInfo.currentMile}}</text>
				</view>
				<view class="item">
					<text class="name">骑行排名</text>
					<text class="value">{{persionInfo.rank}}</text>
				</view>
			</view>
		</view>
		
		<view class="bar_wraper_follow">
				<view class="bar_wraper">
					<view v-for="(item,index) in list" :key="index" :class="index==activeIndex?'bar_item active':'bar_item'" @click="selectItem(index)">
						<text class="value">{{item.currentMile}}</text>
						<view class="bar_inner">
							<view class="bar_outter" :style="'height:'+(item.currentMile/maxMile)*400+'rpx'"></view>
						</view>
						<text class="date">{{item.statisticsTime}}</text>
					</view>
				
				</view>
		</view>
		
		<view class="statics">
			<view class="statics_item">
				<view>
					<image class="icon" src="@appstatic/car/cycling_icon_2.png" mode="widthFix"></image>
					<text class="statics_item_lable">骑行里程 km</text>
				</view>
				<view class="statics_item_num">{{activeInfo.currentMile}}</view>
			</view>
			<view class="statics_item">
				<view>
					<image class="icon" src="@appstatic/car/cycling_icon_1.png" mode="widthFix"></image>
					<text class="statics_item_lable">骑行时间 h</text>
				</view>
				<view class="statics_item_num">{{activeInfo.runDuration}}</view>
			</view>
			<view class="statics_item">
				<view>
					<image class="icon" src="@appstatic/car/cycling_icon_3.png" mode="widthFix"></image>
					<text class="statics_item_lable">最高速度 km/h</text>
				</view>
				<view class="statics_item_num">{{activeInfo.maxSpeed}}</view>
			</view>
			<view class="statics_item">
				<view>
					<image class="icon" src="@appstatic/car/cycling_icon_4.png" mode="widthFix"></image>
					<text class="statics_item_lable">平均速度 km/h</text>
				</view>
				<view class="statics_item_num">{{activeInfo.averageSpeed}}</view>
			</view>
		</view>
	</view>
</template>

<script>
	const app = getApp();
	const util = require('@utils/util.js');
	const network = require('@manager/network-manager.js');
	const dialog = require('@utils/dialog.js');
	export default {
		data() {
			return {
				title: '骑行统计',
				tabsList: [{
					name: '日里程榜',
					statisticsType:1
				}, {
					name: '周里程榜',
					statisticsType:3
				}, {
					name: '月里程榜',
					statisticsType:2
				}],
				deviceId:'',
				statisticsType:1,
				persionInfo:'',
				list:[],
				activeIndex:0,
				activeInfo:'',
				navigationBarHeight: app.globalData.statusBarHeight + 44 + 'px',
			}
		},
		mounted(){
		
			this.queryList()
			this.queryPersionInfo()
		},
		onLoad() {
			if (uni.getStorageSync('deviceId')) {
				this.deviceId = uni.getStorageSync('deviceId')
			}
		},
		methods: {
			selectSort(val) {
				this.statisticsType = val.statisticsType
				this.queryList()
			},
			selectItem(idx){
				this.activeIndex = idx
				this.activeInfo = this.list[idx]
			},
			
			queryPersionInfo(){
				
				var _self = this
				var uri = app.globalData.config.interfaces.URL_CMOBILE_VEHICLEINFO_QUERYMILEINFO;
				var params = {
					"deviceId": this.deviceId
				};
				network.get(uri, params, 'form').then(res => {
					if (res.code == 200) {
						
						
						_self.persionInfo = res.data
				
					} else {
						uni.showToast({
							title: res.resultNote,
							duration: 3000,
							icon: 'none'
						})
					}
				}).catch(res => {
					uni.stopPullDownRefresh();
					uni.showToast({
						title: res.errMsg,
						duration: 3000,
						icon: 'none'
					})
					console.error(res);
				});
			},
			queryList(){
				var _self = this
				var uri = app.globalData.config.interfaces.URL_CMOBILE_VEHICLEINFO_QUERYMILESTATISTICS;
				var params = {
					"deviceId": this.deviceId,
					"statisticsType": this.statisticsType
				};
				network.get(uri, params, 'form').then(res => {
					if (res.code == 200) {
						// _self.topicList = res.data.list;
						console.log(JSON.parse(res.data.statistics))
						res.data.statistics = JSON.parse(res.data.statistics)
						_self.list = res.data.statistics
						_self.activeIndex = _self.list.length-1
						_self.activeInfo = _self.list[_self.activeIndex]
						var arr =[]
						_self.list.map(item=>{
							arr.push(item.currentMile)
						})
						this.maxMile = Math.max(...arr)
					
					} else {
						uni.showToast({
							title: res.resultNote,
							duration: 3000,
							icon: 'none'
						})
					}
				}).catch(res => {
					uni.stopPullDownRefresh();
					uni.showToast({
						title: res.errMsg,
						duration: 3000,
						icon: 'none'
					})
					console.error(res);
				});
			}
		}
	}
</script>

<style scoped lang="scss">
	.bar_wraper_follow{
		width: 100%;
		height: 620rpx;
		overflow: hidden;
	}
	/deep/uni-page-wrapper{
		background-color: #e5e5e5;
		height: 100%;
		background: url(https://pfmotortest.hb4oss.xstore.ctyun.cn/appstatic/my/my_icon_list_background.jpg) no-repeat;
		    background-size: cover;
	}
	.statics_item_num{
		font-family: 'Arial';
		font-weight: 700;
		font-style: italic;
		font-size: 48rpx;
		line-height: 100%;
		color: #3D3A3A;
		padding-top: 40rpx;
	}
	.statics_item_lable{
		font-size: 28rpx;
		line-height: 97.5%;
		/* identical to box height, or 14px */
		
		text-align: center;
		
		/* 力帆-禁用 */
		
		color: #ADB0AE;
	}
	.icon {
		width: 38rpx;
	}
	.statics_item >view:first-child{
		display: flex;
		    align-items: center;
	}
	.statics_item {
		width: 50%;
		display: flex;
		justify-content: center;
		flex-direction: column;
		align-items: center;
		margin-bottom: 100rpx;
	}

	.wraper {
		position: relative;
		
	}

	.active text{
		font-weight: 700;
		color: #000000;
	}
	.active{
		filter: drop-shadow(0px 0px 10px rgba(0, 0, 0, 0.1));
	}
	.bar_wraper {
		width: calc(100% - 40rpx);
		margin: 40rpx auto;
		display: flex;
		margin-top: 140rpx;
		
		overflow-x: auto;
	}

	.statics {
		width: calc(100% - 22px);
		margin: 22px auto;
		display: flex;
		margin-top: 77px;
		justify-content: center;
		flex-wrap: wrap;
		align-items: center;
	}

	.date {
		font-family: 'Arial';
		font-style: italic;
		font-weight: 400;
		font-size: 24rpx;
		line-height: 28rpx;
		padding-top: 8rpx;

		color: #ADB0AE;
	}

	.value {
		font-family: 'Arial';
		font-style: italic;
		font-weight: 400;
		font-size: 28rpx;
		line-height: 32rpx;
		padding-bottom: 10rpx;

		color: #ADB0AE;
	}

	.bar_item {
		display: flex;
		flex-direction: column;
		align-items: center;
		flex-basis: 120rpx;
		flex-shrink: 0;
	}

	.bar_inner {
		width: 32rpx;
		height: 400rpx;
		background-color: #FFFFFF;
		position: relative;
	}

	.bar_outter {
		width: 32rpx;
		height: 300rpx;
		background: linear-gradient(275.01deg, #EA5404 -15.59%, #FF7A00 68.43%);
		position: absolute;
		bottom: 0;
		left: 0;
	}

	.custom_card_wraper {
		display: flex;
	}

	.custom_card_wraper .item {
		display: flex;
		flex-direction: column;
		align-items: flex-start;
	}

	.custom_card_wraper .name {
		font-weight: 500;
		font-size: 24rpx;
		line-height: 34rpx;
		display: flex;
		align-items: center;

		color: #B63300;
	}

	.custom_card_wraper .value {
		font-weight: 700;
		font-size: 40rpx;
		line-height: 46rpx;
		margin-top: 10rpx;
		color: #FFFFFF;
		font-family: 'Arial';
		font-style: italic;

	}

	

	/deep/.u-tabs__wrapper__nav__line {
		background-color: #EA5404 !important;
	}
	.tabs{
		position: relative;
	}

	.custom_card_bg {
		width: 686rpx;
		height: 200rpx;
		position: absolute;
		top: 0;
		right: 0;
	}



	.custom_card {
		width: calc(100% - 80rpx);
		height: 144rpx;
		background: rgba(255, 111, 34, 1);
		border-radius: 8rpx;
		top: 40rpx;
		padding: 20rpx;
		left: 20rpx;
		position: relative;
		overflow: hidden;
	}



	.custom_card_wraper {
		display: flex;
		justify-content: space-between;
		align-items: center;
		position: relative;
		height: 100%;
	}
</style>
